<template>
  <div class="store-apply">
    <a-card style="margin-bottom: 10px">
      <div class="card-context">
        <div>
          <SearchOutlined /> <span style="margin-left: 10px">筛选搜索</span>
        </div>
        <div>
          <a-button style="margin-right: 20px">重置</a-button
          ><a-button type="primary">查询结果</a-button>
        </div>
      </div>
      <div style="padding: 20px">
        <a-form layout="inline">
          <a-form-item label="店铺名">
            <a-input placeholder="请输入店铺名" />
          </a-form-item>
          <a-form-item label="负责人姓名">
            <a-input placeholder="请输入负责人姓名" />
          </a-form-item>
        </a-form>
      </div>
    </a-card>

    <a-card>
      <div class="card-context">
        <div>
          <BarsOutlined /><span style="margin-left: 10px">数据列表</span>
        </div>
      </div>
    </a-card>

    <a-table
      :columns="columns"
      :data-source="data"
      bordered
      ellipsis
      style="margin-top: 10px"
      rowKey="storeId"
    >
      <template #storeState="{ record }">
        <a-tag color="green" v-if="record.storeState == 1"> 等通过 </a-tag>
        <a-tag color="red" v-if="record.storeState == 2"> 已拒绝 </a-tag>
      </template>
      <template #action="{ record }">
        <a-space>
          <a-button
            size="small"
            :disabled="record.storeState != 1"
            @click="adop(record)"
          >
            通过
          </a-button>
          <a-button
            size="small"
            type="danger"
            :disabled="record.storeState != 1"
            @click="refuse(record)"
          >
            拒绝
          </a-button>
        </a-space>
      </template>
      <template #expandedRowRender="{ record }">
        <div class="more-info">
          <a-row :gutter="[16, 24]">
            <a-col :span="3">联系电话:</a-col>
            <a-col :span="9">{{ record.dirTel }}</a-col>
            <a-col :span="3">店铺描述:</a-col>
            <a-col :span="9">{{ record.storeDes }}</a-col>
          </a-row>
          <a-row :gutter="[16, 24]">
            <a-col :span="3">入驻时间:</a-col>
            <a-col :span="9">{{ record.storeCreatTime }}</a-col>
            <a-col :span="3">经营许可证号码:</a-col>
            <a-col :span="9">{{ record.busLicense }}</a-col>
          </a-row>
          <a-row :gutter="[16, 24]">
            <a-col :span="3">收信邮箱</a-col>
            <a-col :span="9">{{ record.email }}</a-col>
            <a-col :span="3"></a-col>
            <a-col :span="9"></a-col>
          </a-row>
        </div>
      </template>
    </a-table>

    <a-modal
      v-model:visible="visible"
      :footer="null"
      :closable="false"
      :maskClosable="false"
    >
      <a-result
        title="正在进行店铺的相关工作,发邮件通知申请者 !"
        v-show="step == 0"
      >
        <template #icon>
          <LoadingOutlined />
        </template>
      </a-result>
      <a-result
        v-if="step == 1"
        status="success"
        title="店铺创建成功，已成功通知申请者！"
      >
      </a-result>
      <a-result
        v-if="step == 2"
        status="warning"
        title="申请拒绝成功，已成功通知申请者！"
      >
      </a-result>
      <a-result v-if="step == 3" status="error" title="网络开小差了 请稍后再试">
      </a-result>
    </a-modal>
  </div>
</template>
<script>
const columns = [
  {
    title: "店铺id",
    dataIndex: "storeId",
    key: "storeId",
    align: "center",
    slots: { customRender: "storeId" },
  },
  {
    title: "店铺名",
    dataIndex: "storeName",
    key: "storeName",
    align: "center",
  },
  {
    title: "负责人名",
    dataIndex: "dirName",
    key: "dirName",
    align: "center",
  },

  {
    title: "店铺状态",
    key: "storeState",
    dataIndex: "storeState",
    align: "center",
    slots: { customRender: "storeState" },
  },
  {
    title: "申请时间",
    dataIndex: "storeCreatTime",
    key: "storeCreatTime",
    align: "center",
  },
  {
    title: "操作",
    key: "action",
    align: "center",
    slots: { customRender: "action" },
  },
];

const data = [];
import { LoadingOutlined } from "@ant-design/icons-vue";
import { BarsOutlined, SearchOutlined } from "@ant-design/icons-vue";

import Base64 from "base-64";

export default {
  components: {
    BarsOutlined,
    SearchOutlined,
    LoadingOutlined,
  },
  data() {
    return {
      data,
      columns,
      visible: false, //模态框
      step: 0, // 0 正在发邮件 1 成功 2 失败 3
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    //获取数据
    getData() {
      this.$axios.get("admin/store/apply/all").then((res) => {
        this.data = res.data.data;
      });
    },
    //审核通过
    adop(record) {
      this.visible = true;
      let token = sessionStorage.getItem("access-token");
      let userString = token.split(".")[1];
      let dat = JSON.parse(Base64.decode(userString));
      let adminInfo = JSON.parse(dat.data);
      console.log(adminInfo.adminId);

      this.$axios
        .get(
          "admin/store/apply/adopt?storeId=" +
            record.storeId +
            "&adminId=" +
            adminInfo.adminId
        )
        .then((res) => {
          if (res.data.code == 2000) {
            this.step = 1;
            this.closeModal();
            this.getData();
          } else {
            this.step = 3;
            this.closeModal();
          }
        });
    },

    closeModal() {
      setTimeout(() => {
        this.visible = false;
        this.step = 0;
      }, 2000);
    },
    refuse(record) {
      this.visible = true;
      let token = sessionStorage.getItem("access-token");
      let userString = token.split(".")[1];
      let dat = JSON.parse(Base64.decode(userString));
      let adminInfo = JSON.parse(dat.data);
      console.log(adminInfo.adminId);
      this.$axios
        .get(
          "admin/store/apply/refuse?storeId=" +
            record.storeId +
            "&adminId=" +
            adminInfo.adminId
        )
        .then((res) => {
          if (res.data.code == 2000) {
            this.step = 2;
            this.getData();
            this.closeModal();
          } else {
            this.step = 3;
            this.closeModal();
          }
        });
    },
  },
};
</script>

<style lang="less" scoped>
.store-apply {
  padding: 24px;
  background-color: #fff;
  margin: 24px 16px;
}
.card-context {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-context > div:nth-child(1) {
  font-size: 20px;
}
</style>